<%--
  Created by IntelliJ IDEA.
  User: haojianlei
  Date: 2019-01-09
  Time: 17:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>汇找船船主端</title>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/slider.js"></script>

    <link href="${pageContext.request.contextPath}" rel="stylesheet">

    <style type="text/css">
        .scroll{
            position:absolute;
            overflow:scroll;
            -webkit-overflow-scrolling: touch;
            top:0;
            left:0;
            bottom:0;
            right:0;
        }
    </style>

</head>
<body>
<div class="scroll">

<section class="aui-flexView">

    <section class="aui-scrollView">
        <div class="aui-flex">
            <div class="m-slider" data-ydui-slider>
                <div class="slider-wrapper">
                    <div class="slider-item">
                        <a href="javascript:;">
                            <img src="${pageContext.request.contextPath}/assets/images/banner.png">
                        </a>
                    </div>
                    <div class="slider-item">
                        <a href="javascript:;">
                            <img src="${pageContext.request.contextPath}/assets/images/banner.png">
                        </a>
                    </div>
                    <div class="slider-item">
                        <a href="javascript:;">
                            <img src="${pageContext.request.contextPath}/assets/images/banner.png">
                        </a>
                    </div>
                    <div class="slider-item">
                        <a href="javascript:;">
                            <img src="${pageContext.request.contextPath}/assets/images/banner.png">
                        </a>
                    </div>
                </div>
                <div class="slider-pagination"></div>
            </div>
        </div>


        <div class="continaira" style="margin-top:-30px;margin-bottom: 30px" id="shipContent">

        </div>
        <div class="foottips" style="width: 100%;text-align: center;margin-bottom: 5px">
            <span style="color: #7b7b7b;font-size: 12px">没有更多货源了～</span>
        </div>

    </section>
</section>
</div>
    <script>
        $(function () {
            $.ajax({
                type: "POST", //用POST方式传输
                dataType: "JSON", //数据格式:JSON
                url: 'aiFeedback/selectAiFeedbackInfo.do', //目标地址
                contentType: "application/json; charset=utf-8",
                async : false,
                success: function (msg){
                    var array = msg.aiFeedbackDtos;
                    console.log(array);
                    if (msg.SUCCESS==true){
                        var str ="";
                        $.each(array,function (i) {
                            str += " <div class=\"aui-flex aui-flex-color\" style=\"background-color:#f5f5f5;height: 200px;margin-top:30px\">\n" +
                                "                <div class=\"aui-flex-box\">\n" +
                                "                    <div class=\"aui-flex-box\">\n" +
                                "                        <h3><span>"+ array[i].originalName +"</span>—<span>"+ array[i].destinationName +"</span></h3>\n" +
                                "                        <li class=\"b-line\" style=\"margin-top:10px\"></li>\n" +
                                "                        <li style=\"margin-top:20px\"><i class=\"icon icon-circle-blue\"></i><span class=\"aui-flex-name\"><span>"+ array[i].tonnage +"</span>吨<span>"+ array[i].goods +"</span></span></li>\n" +
                                "                        <li style=\"margin-top:10px\"><i class=\"icon icon-circle-green\"></i><span class=\"aui-flex-name\">货源方：<span>"+ array[i].companyName +"</span></span></li>\n" +
                                "                        <li style=\"margin-top:10px\"><i class=\"icon icon-circle-yellow\"></i><span class=\"aui-flex-name\">联系人：<span>"+ array[i].account +"</span></span></li>\n" +
                                "                        <li style=\"margin-top:10px\"><i class=\"icon icon-circle-yellow\"></i><span class=\"aui-flex-name\">发货时间：<span>"+ array[i].date +"</span></span></li>\n" +
                                "                    </div>\n" +
                                "                </div>\n" +
                                "            </div>\n" +
                                "            <div class=\"aui-flex aui-flex-color\" style=\"background:linear-gradient(to right,#00afff,#007bff);height: 40px;border-top-left-radius: 0;border-top-right-radius: 0;box-shadow:0px 10px 50px 0px gainsboro; \">\n" +
                                "                <div class=\"aui-flex-box\">\n" +
                                "                    <div class=\"aui-flex-box\" style=\"text-align:center\">\n" +
                                "                        <a href=\"tel:" + array[i].phoneNum + "\"> <span style=\"color:white;font-size:16px;font-weight:700;width: 65%\" class=\"aui-navBar-item\"><i class=\"icon2 icon-phone\"></i>联系货主</span></a>\n" +
                                "                    </div>\n" +
                                "                </div>\n" +
                                "            </div>"
                        })
                        $("#shipContent").html(str);
                    }
                }
            });
        })
    </script>



    <script type="text/javascript">
        function b() {
            t = parseInt(x.css('top'));
            y.css('top', '20px');
            x.animate({
                top: t - 20 + 'px'
            }, 'slow');
            if (Math.abs(t) == h - 20) {
                y.animate({
                    top: '0px'
                }, 'slow');
                z = x;
                x = y;
                y = z;
            }
            setTimeout(b, 3000);
        }
        $(document).ready(function() {
            $('.swap').html($('.news_li').html());
            x = $('.news_li');
            y = $('.swap');
            h = $('.news_li li').length * 20;
            setTimeout(b, 3000);
        })
    </script>

    <script type="text/javascript">
        //禁止下拉
        var overscroll = function(el) {
            el.addEventListener('touchstart', function() {
                var top = el.scrollTop
                    , totalScroll = el.scrollHeight
                    , currentScroll = top + el.offsetHeight

                if(top === 0) {
                    el.scrollTop = 1
                } else if(currentScroll === totalScroll) {
                    el.scrollTop = top - 1
                }
            })
            el.addEventListener('touchmove', function(evt) {
                //if the content is actually scrollable, i.e. the content is long enough
                //that scrolling can occur
                if(el.offsetHeight < el.scrollHeight)
                    evt._isScroller = true
            })
        }
        overscroll(document.querySelector('.scroll'));
        document.body.addEventListener('touchmove', function(evt) {
            //In this case, the default behavior is scrolling the body, which
            //would result in an overflow.  Since we don't want that, we preventDefault.
            if(!evt._isScroller) {
                evt.preventDefault()
            }
        })
    </script>

</body>
</html>